<template>
  <div>
    <el-form
      :model="formData"
      ref="form"
      label-width="200px"
      label-position="right"
    >
      <el-form-item :label="$t('sys.is_enable')" prop="enabled">
        <el-switch v-model="formData.enabled"></el-switch>
      </el-form-item>
      <el-form-item
        :label="$t('sys.appId')"
        prop="appId"
        :rules="[
          formData.enabled
            ? {
                required: true,
                message: $t('sys.appId_not_null'),
                trigger: 'change',
              }
            : {},
        ]"
      >
        <el-input
          style="width: 500px"
          v-model="formData.appId"
          :placeholder="$t('sys.enter_appId')"
          :maxlength="128"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        :label="$t('sys.secret')"
        prop="secret"
        :rules="[
          formData.enabled
            ? {
                required: true,
                message: $t('sys.secret_not_null'),
                trigger: 'change',
              }
            : {},
        ]"
      >
        <el-input
          style="width: 500px"
          v-model="formData.secret"
          :placeholder="$t('sys.enter_secret')"
          :maxlength="128"
          show-word-limit
        />
      </el-form-item>
      <el-form-item
        :label="$t('sys.appUrl')"
        prop="url"
        :rules="[
          formData.enabled
            ? {
                required: true,
                message: $t('sys.appUrl_not_null'),
                trigger: 'change',
              }
            : {},
        ]"
      >
        <div class="appUrl">
          {{ formData.url }}
          <i
            v-if="formData.url"
            class="el-input__icon el-icon-document-copy f18 poi copyIcon"
            @click="copy(formData.url)"
          ></i>
          <i
            v-if="formData.url"
            class="el-input__icon el-icon-refresh f18 poi copyIcon"
            @click="refresh"
          ></i>
        </div>
      </el-form-item>
      <el-form-item
        :label="$t('sys.officialAccountsJsFile')"
        prop="officialAccountsFile"
        :rules="[
          formData.enabled
            ? {
                required: true,
                message: $t('sys.upload_valid_officialAccountsJsFile'),
                trigger: 'change',
              }
            : {},
        ]"
      >
        <Upload
          type="officialaccounts"
          v-model="formData.officialAccountsFile"
          @input="validateField('officialAccountsFile')"
        >
        </Upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="submit">{{
          $t("sys.submit")
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { copy } from "@/utils/util";
import {
  getHmpluginpropertyList,
  postHmpluginproperty,
} from "@/apis/paas/HmPluginPropertyController.js";
import Upload from "./Upload";
export default {
  data() {
    return {
      initLoading: false,
      copy,
      correlationStr: "",
      formData: {
        enabled: false,
        appId: "",
        secret: "",
        url: "",
        officialAccountsFile: "",
      },
      loading: false,
    };
  },
  components: { Upload },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.initLoading = true;
      getHmpluginpropertyList({ group: this.$route.query.group })
        .then((res) => {
          this.formData = {
            enabled: res["officialaccounts.enabled"] === "true",
            appId: res["officialaccounts.appId"],
            secret: res["officialaccounts.secret"],
            url:
              res["officialaccounts.url"] ||
              `${window.location.origin}/officialaccounts/index.html`,
            officialAccountsFile: res["officialaccounts.officialAccountsFile"],
          };
        })
        .finally(() => {
          this.initLoading = false;
        });
    },
    async submit() {
      try {
        await this.$refs.form.validate();
        this.loading = true;
        const { enabled, appId, secret, url, officialAccountsFile } =
          this.formData;
        const data = {
          "officialaccounts.enabled": enabled,
          "officialaccounts.appId": appId,
          "officialaccounts.secret": secret,
          "officialaccounts.url": url,
          "officialaccounts.officialAccountsFile": officialAccountsFile,
        };
        for (const key in data) {
          data[key] =
            typeof data[key] === "string" ? data[key].trim() : data[key];
        }
        postHmpluginproperty(data)
          .then((res) => {
            this.$message.success(this.$t("sys.operation_success"));
          })
          .finally(() => {
            this.loading = false;
          });
      } catch (error) {
        console.log(error);
      }
    },
    refresh(field) {
      this.formData.url = `${window.location.origin}/officialaccounts/index.html`;
    },
    validateField(field) {
      this.$refs.form.validateField(field);
    },
  },
};
</script>

<style lang="scss" scoped>
.appUrl {
  min-height: 32px;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  word-break: break-all;
  padding: 0 15px;
  width: 500px;
  box-sizing: border-box;
  .copyIcon {
    color: #3d64ff;
  }
}
</style>
